<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>rcarousel – vertical carousel</title>
        <link type="text/css" rel="stylesheet" href="css/reset.css" />			
        <link type="text/css" rel="stylesheet" href="css/style.css" />		
        <link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
		<style type="text/css">
			#container {
				width: 100px;
				height: 400px;
				position: relative;
			}
			
			#carousel {
				position: absolute;
				top: 50px;
			}

			#carousel img {
				border: 0;
			}

			#ui-carousel-next, #ui-carousel-prev {
				width: 100px;
				height: 50px;
				background: url(images/arrow-bottom.png) #fff center center no-repeat;
				display: block;
				position: absolute;
				left: 0
				z-index: 100;
			}

			#ui-carousel-next {
				top: 0;
				background-image: url(images/arrow-top.png);
			}

			#ui-carousel-prev {
				bottom: 0;
			}
			
			#ui-carousel-next > span, #ui-carousel-prev > span {
				display: none;
			}	
		</style>
	</head>
	<body>
		<div id="header">
			<p>
				This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
				Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
			</p>
		</div>
		
		<div id="content">
			<h1>vertical carousel</h1>
			
			<div id="container">
				<div id="carousel">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />
				</div>
				<a href="#" id="ui-carousel-next"><span>next</span></a>
				<a href="#" id="ui-carousel-prev"><span>prev</span></a>
			</div>
		</div>

		<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.rcarousel.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				$("#carousel").rcarousel({
					orientation: "vertical"
				});
				
				$( "#ui-carousel-next" )
					.add( "#ui-carousel-prev" )
					.hover(
						function() {
							$( this ).css( "opacity", 0.7 );
						},
						function() {
							$( this ).css( "opacity", 1.0 );
						}
					);					
			});
		</script
    </body>
</html>
